body {
  width: 100vw;
  height: 100vh;
  display: grid;
  justify-content: center;
  align-content: center;
}
$width: 400px;
$height: 400px;

@mixin center {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

main {
  width: $width;
  height: $width;
  position: relative;
  border: solid 2px #ddd;
  border-radius: 50%;
  //   display: flex;
  //   justify-content: center;
  //   align-items: center;
  &::before {
    content: '';
    width: 10px;
    height: 10px;
    background-color: #000;
    border-radius: 50%;
    @include center();
  }
  section {
    // transform: translateX(-15px);
    // width: 100%;
    // height: 100%;
    @include center();
    div {
      width: 30px;
      height: 5px;
      background-color: #000;
      //transform-origin: center center;
      //@include center;
      @for $i from 1 to 13 {
        &:nth-child(#{$i}) {
          transform: rotate(#{$i * 30}deg) translateX(-150px);
        }
      }

      // transition-duration: 1s;
    }
  }
  &:hover > div {
    // transform: translateY(-50%) rotate(245deg);
  }
}
